<template>
  <div class="container">
    <!-- header -->
    <div
      class="container_title"
      v-drag-window
      v-show="!fullScreen"
    >
      <img
        class="logo"
        ondragstart="return false"
        height="40px"
        :src="skin.app.logo"
      >
      <span
        class="ajmc nowrap"
        v-if="caseInfo.AJMC"
        :title="caseInfo.AJMC"
      >
        <span class="separator">|</span>&nbsp;{{ caseInfo.AJMC }}</span>
      <div class="container_title_right">
        <div
          class="btn_set nodrag"
          @pointerdown.stop="{}"
          @click.stop="setWindow=true;setIndex=1"
          title="设置"
        >
          <el-badge
            is-dot
            class="update-tips"
            v-if="updateStatus === 3"
          ></el-badge>
        </div>
        <div
          class="btn_min nodrag"
          @pointerdown.stop="{}"
          @click.stop="window_control('min')"
          title="最小化"
        ></div>
        <div
          class="btn_max nodrag"
          @pointerdown.stop="{}"
          @click.stop="window_control('max',isMaxWindow)"
          :title="isMaxWindow?'还原':'最大化'"
          :class="{btn_restore:isMaxWindow}"
        ></div>
        <div
          class="btn_close nodrag"
          @pointerdown.stop="{}"
          @click.stop="window_control('close')"
          title="关闭"
        ></div>
      </div>
    </div>
    <div
      class="container_main"
      v-loading="loading"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
    >
      <!--这里是页面组件列表-->
      <main-page
        v-if="currPage===1"
        ref="mainPage"
      ></main-page>
      <appear-court
        v-else
        ref="appearCourt"
      ></appear-court>
    </div>
    <!-- 弹出框 -->
    <vmodal
      :modalshow="setWindow"
      modaltitle="设置"
      :closeonclickmodal="false"
      :styleobj="{width:'600px',height:'400px'}"
      @hide="setWindow=false"
    >
      <div
        slot="modal"
        style="width: 100%;height: 100%;position: relative;"
      >
        <setting :set-index="setIndex"></setting>
      </div>
    </vmodal>
  </div>

</template>

<script>
import {mapState, mapActions} from 'vuex'
import A from '../common/typeActions'
// import L from '../../../common/localStore'
import common from '../common/common'
// import {startSocket} from '../../util/socket'

import MainPage from "@/views/MainPage";
import Setting from "@/views/Container/Setting";

let remote = ''


const skin = require('../config/skin')
// const moment = require('moment')
// const path = require('path')

export default {
  components: {MainPage, Setting},
  name: 'Container',
  data() {
    return {
      setWindow: false,
      modaltitle: '',
      modalheight: '',
      modalwidth: '',
      // isExtensionUse: false,
      // regInfo: L.LocalStore.getRegInfo(),
      setIndex: 1,
      skin: skin[skin.useSkin]
    }
  },
  computed: {
    ...mapState({
      loading: state => state.container.loading,
      loadingText: state => state.container.loadingText,
      isMaxWindow: state => state.container.isMaxWindow,
      fullScreen: state => state.container.fullScreen,
      isRegisted: state => state.container.isRegisted,
      isExtensionUse: state => state.container.isExtensionUse,
      usedDays: state => state.container.usedDays,
      currPage: state => state.container.currPage,
      regInfo: state => state.container.regInfo,
      caseInfo: state => state.appearCourt.caseInfo,
      updateStatus: state => state.system.updateStatus
    })
  },
  methods: {
    ...mapActions({
      initContainer: A.CONTAINER.initContainer
    })
    // extensionUse () {
    //   if (!this.skin.app.isTrial) return
    //   // debugger;
    //   this.$confirm('当前试用已到期，是否继续试用？', '提示', {
    //     confirmButtonText: '是',
    //     cancelButtonText: '否',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       debugger
    //       this.regInfo.fstartupdate = moment().format('YYYY-MM-DD HH:mm:ss')
    //       this.regInfo.lstartupdate = moment().format('YYYY-MM-DD HH:mm:ss')
    //       this.regInfo.delayTimes = this.regInfo.delayTimes
    //         ? this.regInfo.delayTimes + 1
    //         : 1
    //       L.LocalStore.setRegInfo(this.regInfo)
    //       this.isExtensionUse = true
    //       this.$store.dispatch(A.CONTAINER.initContainer)
    //     })
    //     .catch(console.error)
    // }
  },
  async mounted() {
    console.log(this.$store)
    try {
      // await startSocket()

      let ip = this.skin.app.tyyw ? this.skin.app.tyyw : localStorage.getItem('tyywIP')
      if (ip) await common.GenerateConfigFiles(ip)
    } catch (error) {
      await this.$alert(error.message, '错误', {type: 'error'})
      remote.app.quit()
      remote.app.exit(0)
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /*font-size: 0;*/
  vertical-align: top;
  user-select: none;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  overflow: hidden;
  border: 1px #157ac1 solid;
}

.logo {
  margin-top: 5px;
  margin-left: 10px;
}

.container_title {
  height: 50px;
  background: #157ac1;
  position: relative;
  overflow: hidden;
}

.container_title .ajmc {
  color: #ddf0fa;
  margin-left: 10px;
  font-size: 18px;
  line-height: 53px;
  font-family: 微软雅黑;
  max-width: calc(100% - 480px);
  display: inline-block;
}

.ajmc .separator {
  font-size: 18px;
}

.appearCourt .container_title_right {
  margin-top: 0;
}

.container_title_right {
  position: absolute;
  right: 0;
  z-index: 999;
  top: 0;
  background: #157ac1;
  min-width: 175px;
  overflow-y: visible;
  text-align: right;
  margin-top: 3px;
}

.btn_set,
.btn_min,
.btn_max,
.btn_close {
  height: 40px;
  width: 40px;
  display: inline-block;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

.btn_min {
  background-image: url("~@/assets/img/window_control/min.png");
}

.btn_min:hover {
  background-image: url("~@/assets/img/window_control/min_hover.png");
}

.btn_max {
  background-image: url("~@/assets/img/window_control/max.png");
}

.btn_max:hover {
  background-image: url("~@/assets/img/window_control/max_hover.png");
}

.btn_restore {
  background-image: url("~@/assets/img/window_control/restore.png") !important;
}

.btn_restore:hover {
  background-image: url("~@/assets/img/window_control/restore_hover.png") !important;
}

.btn_close {
  background-image: url("~@/assets/img/window_control/close.png");
}

.btn_close:hover {
  background-image: url("~@/assets/img/window_control/close_hover.png");
  /*background-color: #cc0000;*/
}

.btn_set {
  background-image: url("~@/assets/img/set.png");
}

.btn_set:hover {
  background-image: url("~@/assets/img/set_hover.png");
}

.btn_sets:hover span {
  color: #87cdfe !important;
}

.set_item {
  padding: 0 20px;
  position: relative;
}

.set_item span {
  font-size: 14px;
  line-height: 40px;
  margin-left: 25px;
}

.set_item:hover {
  background: #22a5fa;
}

.set_item:hover span {
  color: white;
}

.set_item1 .icon,
.set_item2 .icon,
.set_item3 .icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.set_item1 .icon {
  background: url("~@/assets/img/setone.png");
}

.set_item2 .icon {
  background: url("~@/assets/img/user.png");
}

.set_item3 .icon {
  background: url("~@/assets/img/about.png");
}

.set_item1:hover .icon {
  background: url("~@/assets/img/setone-.png");
}

.set_item2:hover .icon {
  background: url("~@/assets/img/user-.png");
}

.set_item3:hover .icon {
  background: url("~@/assets/img/about-.png");
}

.container_main {
  height: calc(100% - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.container_main_unregisted {
  height: calc(100% - 90px);
}

.container_main_unregisted.container_main_fullScreen {
  height: calc(100% - 40px) !important;
}

.container_main.container_main_fullScreen {
  height: 100% !important;
}

.mainpage_foot {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0px;
  background: #f44324;
  line-height: 40px;
  color: white;
  font-size: 14px;
}

.mainpage_foot span {
  font-size: 14px;
}

.mainpage_footspan {
  text-decoration: underline;
  text-decoration-color: white;
  margin-left: 10px;
  cursor: pointer;
}

.container_main_unregisted .shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 399;
}

.container .update-tips {
  position: relative;
  top: 4px;
  height: 8px;
}
</style>
